import React, { Component } from 'react';
class sstsy extends Component {
  constructor(props) {
    super(props);
    this.state = { 
      a:0,
      b:0,
      c:0
    }
  }
  render() { 
    return ( 
      <div>
        <div>
          <p>a内容 -- 普通写法：{this.state.a}</p>
          <button onClick={this.aAdd}>a加</button>
        </div>
        <div>
          <p>b内容 -- 对象式写法：{this.state.b}</p>
          <button onClick={this.bAdd}>b加</button>
        </div>
        <div>
          <p>b内容 -- 函数式写法：{this.state.c}</p>
          <button onClick={this.cAdd}>c加</button>
        </div>
      </div>
    );
  }

  //this.setState()  刷新render()

  // 普通写法 ---- 修改完页面状态更新是异步的
  aAdd = () => {
    let { a } = this.state
    this.setState({
      a:a+1
    })
    console.log(this.state.a)
  }

  //对象式写法
  bAdd = () => {
    let { b } = this.state
    this.setState({ b:b+1},()=>{
      console.log(this.state.b)
    })
  }

  // 函数式写法
  cAdd = () => {
    this.setState((state,props)=>{
      return { c:state.c+1 }
    })
  }
}
 
export default sstsy;